import axios from 'axios'
import { Toast } from 'vant'
import store from '@/store/index'

const instance = axios.create({
    baseURL: 'http://smart-shop.itheima.net/index.php?s=/api',
    timeout: 5000,
});


// 添加请求拦截器
instance.interceptors.request.use(function (config) {

    // 在发送请求之前做些什么
    //开启loading,禁止背景点击(节流处理，防止多次无效触发)
    // 自定义加载图标
    Toast.loading({
        message: '加载中...',
        forbidClick: true,//禁用背景点击
        loadingType: 'circular',
        duration:0 //默认是加载2s,如果配置为0，是不会自动消失的，要等请求回来之后才会关闭
    });

    //配置请求的token 请求头
    const token = store.getters.token
    if(token){
        //config.headers['Access-Token'] === config.headers.AccessToken
        //因为这个这个Access-Token 中间带有特殊字符，所以必须使用这中['']的方式
        config.headers['Access-Token'] = token
        config.headers.platform = 'H5'
    }
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    const result = response.data;
    if (result.status !== 200) {
        //给一个提示，并且抛出一个错误的permise
        //这里不可以使用this.$toast.fail()，因为当前这个js文件不是vue的组件的环境
        //给错误提示，Toast默认是单例模式，后面的Toast一旦调用了，会将前一个Toast覆盖，同一时间只能存在一个Toast
        Toast.fail(result.message);
        //抛出一个错误的permise
        return Promise.reject(result.message)
    }
    //响应正确的情况下，关闭loading加载
    Toast.clear()
    return response.data;
}, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
});

// 导出配置好的axios实例
export default instance